{% extends "base.html" %}
{% load staticfiles %}
{% block title %} LIU Liang {% endblock %}
{% block menucss %} {% static "css/menu.css" %} {% endblock %}
{% block cssfiles %} {% static "css/contact.css" %} {% endblock %}

{% block javascripts %}
<script src="{% static "javascripts/jquery-1.9.1.js" %}"></script>
<script>
$(document).ready(function(){
	  $('input[type=text][title],input[type=password][title],textarea[title]').each(function(i){
	    $(this).addClass('input-prompt-' + i);
	    var promptSpan = $('<span class="input-prompt"/>');
	    $(promptSpan).attr('id', 'input-prompt-' + i);
	    $(promptSpan).append($(this).attr('title'));
	    $(promptSpan).click(function(){
	      $(this).hide();
	      $('.' + $(this).attr('id')).focus();
	    });
	    if($(this).val() != ''){
	      $(promptSpan).hide();
	    }
	    $(this).before(promptSpan);
	    $(this).focus(function(){
	      $('#input-prompt-' + i).hide();
	    });
	    $(this).blur(function(){
	      if($(this).val() == ''){
	        $('#input-prompt-' + i).show();
	      }
	    });
	  });
	});
</script>
<style type="text/css">
.input-prompt {
  position: absolute;
  font-style: italic;
  color: #aaa;
  margin: 0.2em 0 0 0.5em;
}
</style>
{% endblock %}

{% block content %}

<div id="coordinates" class="wrapper">
	<br />
	<address>
		Phone : +33 (0) 6 38 38 34 23<br /> E-mail : <a
			href="mailto:mmhancxt@gmail.com">mmhancxt@gmail.com</a> <br />
	</address>
	<hr />
	<br /> <br />
	<div id="Messages">
		<p class="message"><b>Latest Messages</b></p>
		{% for message in latestMessages %}
		<p>
			<span id="author">{{ message.author}}</span><span id="date">
				{{message.pubDate }}</span><br /> 
			<span class="message">{{ message.content }}</span>
		<hr />
		{% endfor %}
	</div>
</div>

<div id="MessageBoard" class="wrapper">
<br />
Please leave some message
<form action="/contact/" method="post">{% csrf_token %}
	{{ form.author }} <br />
	{{ form.content }} <br />
	<input type="submit" value="Submit" />
</form>
</div>
{% endblock %}